<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="form" :model="params" :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="24" type="flex">
                    <Col v-bind="grid">
                    <DatePicker type="year" :clearable="false" v-width="'100%'" format="yyyy" v-model="params.year"
                        @on-change="askData" placeholder="请选择年份"></DatePicker>
                    </Col>
                    <Col v-bind="grid">
                    <Input v-model="params.keyword" placeholder="请输入患者姓名/手机号/诊疗号" clearable element-id="name"
                        @on-clear="askDatas" @on-enter="askDatas" />
                    </Col>
                    <Col v-bind="grid">
                    <FormItem label="诊室" prop="disease" label-for="disease">
                        <Select v-model="params.clinic_id" clearable placeholder="请选择诊室" element-id="disease"
                            @on-change="askData">
                            <Option v-for="item in clinic" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                    <Col v-bind="grid">
                    <FormItem label="所属医助" prop="channel" label-for="channel">
                        <Select v-model="params.belong_assistant_id" clearable placeholder="所属医助" element-id="channel"
                            @on-change="askData">
                            <Option v-for="item in member_medical_list" :value="item.id" :key="item.id">{{ item.name }}
                            </Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div class="i-table-no-border">
                <Table size="small" ref="table" :columns="columns" :loading="loading" :data="data" @on-sort-change="sortchange">
                    <template slot-scope="{row}" slot="info">
                        <a href="javaScript:;" @click="handleDetailPatient(row)">{{ row.info }}</a>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page :total="total" :current.sync="params.page" show-total show-elevator transfer
                        :page-size="params.pageSize" @on-change="formChangePage" :page-size-opts="pageOpts" show-sizer
                        @on-page-size-change="formSize" />
                </div>
            </div>
        </Card>
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
            <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId">
            </detailDrawer>
        </Drawer>
    </div>

</template>
<script>
    import {
        followlist, followselectinfo
    } from '@/api/followuplist';
    import { mapState } from 'vuex';
    import detailDrawer from '../patient/patient-detail/index.vue'
    import dayjs from 'dayjs'

    export default {
        name: 'followuplist',
        components: { detailDrawer },
        data () {
            return {
                patientId: null,
                edit_type: 2,
                showTetailDrawer: false,
                member_medical_list: [], // 医助列表
                clinic: [], // 诊室列表
                loading: false,
                total: 0,
                params: { page: 1, pageSize: 10, year: '', keyword: '', clinic_id: '', belong_assistant_id: '',sort_field:'',sort:'' },
                pageOpts: [10, 20, 30, 50],
                columns: [
                    { title: '基本信息', slot: 'info', minWidth: 138, fixed: 'left' },
                    { title: '诊室', key: 'clinic_name', minWidth: 100, fixed: 'left' },
                    { title: '1月',sortable:'custom', key: 'month_1', minWidth: 120 },
                    { title: '2月',sortable:'custom', key: 'month_2', minWidth: 120 },
                    { title: '3月',sortable:'custom', key: 'month_3', minWidth: 120 },
                    { title: '4月',sortable:'custom', key: 'month_4', minWidth: 120 },
                    { title: '5月',sortable:'custom', key: 'month_5', minWidth: 120 },
                    { title: '6月',sortable:'custom', key: 'month_6', minWidth: 120 },
                    { title: '7月',sortable:'custom', key: 'month_7', minWidth: 120 },
                    { title: '8月',sortable:'custom', key: 'month_8', minWidth: 120 },
                    { title: '9月',sortable:'custom', key: 'month_9', minWidth: 120 },
                    { title: '10月',sortable:'custom', key: 'month_10', minWidth: 120 },
                    { title: '11月',sortable:'custom', key: 'month_11', minWidth: 120 },
                    { title: '12月',sortable:'custom', key: 'month_12', minWidth: 120 },
                    { title: '合计', key: 'month_total',sortable:'custom', minWidth: 120, fixed: 'right' }
                ],
                data: [],
                grid: { xl: 4, lg: 8, md: 12, sm: 24, xs: 24 }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        created () {
            this.initial()
        },
        methods: {
            closeDrawer () {
                this.initial()
            },
            // 初始化
            initial () {
                this.params.year = new Date().getFullYear() + ''
                // console.log(this.params.year)
                followselectinfo().then(res => {
                    this.member_medical_list = res.member_medical_list
                    this.clinic = res.clinic
                    this.askData()
                })
                // this.state = JSON.parse(localStorage.getItem('poweredit'));
                // for (let item of this.state) {
                //     if (item.name === '营销状态新增') {
                //         this.hqcreate = item.bool
                //     } else if (item.name === '营销状态编辑') {
                //         this.hqupdate = item.bool
                //     } else if (item.name === '营销状态删除') {
                //         this.hqdelete = item.bool
                //     }
                // }
            },
            // 请求数据
            askData () {
                this.loading = true
                this.params.year = dayjs(this.params.year).format('YYYY')
                followlist(this.params).then(res => {
                    this.data = res.list
                    this.params.page = res.page
                    this.params.pageSize = res.pageSize
                    this.total = res.total
                    this.loading = false
                })
            },
            askDatas () {
                this.params.page = 1
                this.askData()
            },
            // 分页
            formChangePage (e) {
                this.params.page = e
                this.askData()
            },
            // 页数
            formSize (i) {
                this.params.pageSize = i;
                this.askData()
            },
            handleDetailPatient (row) {
                this.patientId = row.id
                this.showTetailDrawer = true
                // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 2 })
                // this.$router.push('/patient/detail')
            },
            sortchange(e){
                this.params.sort_field = e.key
                if (e.order === 'asc') {
                    this.params.sort = '1'
                }
                else if (e.order === 'desc') {
                    this.params.sort = '2'
                }
                this.params.page = 1
                this.askData()
            }
        }
    }
</script>
